<template>
    <div>
        <div class="container block block-alone">
            <div class="header">
                <div class="row header-info-box">
                    <div class="title">被派遣单位</div>
                    <div></div>
                </div>
            </div>
            <div class="row">
                <div class="search">
                    <input type="text" placeholder="请输入单位名称" class="input search-input" v-model="searchText"
                        @keydown.enter="search" />
                    <button class="btn" @click="search">搜索</button>
                    <button class="btn-white" @click="onReset">重置</button>
                </div>
                <div>
                    <!-- <button class="btn" style="width:128px" @click="centerDialogVisible=true">添加被派遣单位</button> -->
                </div>
            </div>
            <el-tabs model-value="detail">
                <div class="table">
                    <el-table :data="tableData" style="width: 100%;" :header-cell-style="{ background: '#FBFBFD' }"
                        :header-row-style="{ color: '#202536' }" :row-style="{ color: '#5E617D' }"
                        @selection-change="handleSelectionChange">
                        <!-- <el-table-column type="index" label="序号" /> -->
                        <el-table-column label="企业名称" width="200px">
                            <template #default="scope">
                                {{ scope.row.wesureInfo.serveCompanyName }}
                            </template>
                        </el-table-column>
                        <el-table-column label="行业">
                            <template #default="scope">
                                {{
                                    scope.row.wesureInfo.industryName || "暂无"
                                }}
                            </template>
                        </el-table-column>
                        <el-table-column label="视频">
                            <template #default="scope">
                                <p style="color:#1989FA" class="point" v-for="(item, index) in scope.row.params
                                    .file" :key="index">
                                    <a v-if="
                                        /(.mp4|.flv|.mov|.wmv|.avi|.mpeg|.rmvb)$/.test(
                                            item
                                        )
                                    " class="left-video-a" style="color:#1989FA;text-decoration:none;"
                                        target="_blank" :href="item">点击查看视频</a>
                                    <el-image style="width: 100px; height: 50px" :src="item" fit="cover"
                                        :preview-src-list="[item]" :initial-index="0" v-if="
                                            !/(.mp4|.flv|.mov|.wmv|.avi|.mpeg|.rmvb)$/.test(
                                                item
                                            )
                                        ">
                                        <template>
                                            点击查看图片
                                        </template>
                                    </el-image>
                                </p>
                            </template>
                        </el-table-column>
                        <el-table-column width="240px" prop="createTime" label="添加时间" />
                        <el-table-column label="状态">
                            <template #default="scope">
                                <div class="decorate-box">
                                    <div class="decorate" :style="{
                                        background:
                                            scope.row.wesureInfo
                                                .auditStatus == 0
                                                ? '#FFC53D'
                                                : scope.row.wesureInfo
                                                    .auditStatus == 1
                                                    ? '#00D679'
                                                    : '#FF7E68'
                                    }"></div>
                                    <!--  style="color:#1989FA" -->
                                    <!-- 0未提交审核1已通过2驳回3审核中 -->
                                    <p>
                                        {{
                                            scope.row.wesureInfo.auditStatus ==
                                                0
                                                ? "未提交审核"
                                                : scope.row.wesureInfo
                                                    .auditStatus == 1
                                                    ? "已通过"
                                                    : scope.row.wesureInfo
                                                        .auditStatus == 2
                                                        ? "驳回"
                                                        : scope.row.wesureInfo
                                                            .auditStatus == 3
                                                            ? "审核中"
                                                            : ""
                                        }}
                                    </p>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="申请理由" prop="remark"></el-table-column>
                        <el-table-column label="驳回理由" prop="rejectRemark"></el-table-column>
                        <el-table-column label="操作">
                            <template #default="scope">
                                <!-- <p
                                    v-if="!scope.row.status"
                                    style="color:#1989FA"
                                    class="point"
                                    @click="
                                        cancelDispatchExamine(scope.row.id)
                                    "
                                >
                                    取消
                                </p> -->
                                <p v-if="
                                    scope.row.wesureInfo.auditStatus !== 3
                                " style="color:#FF7E68" class="point" @click="deleteDispatchExamine(scope.row.id)">
                                    删除
                                </p>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination class="pagination" v-model:currentPage="pageNum" v-model:page-size="pageSize"
                        :page-sizes="[10, 30, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                        @size-change="handleSizeChange" @current-change="getPayrollList">
                    </el-pagination>
                </div>
            </el-tabs>
            <batchPayroll v-if="isBatchPay" @close="isBatchPay = false" @complete="getPayrollList" isType="payroll" />
        </div>
        <el-dialog v-model="centerDialogVisible" title="新增被派遣单位1984890896" width="642px" destroy-on-close center>
            <div class="row">
                <div class="name">
                    <span class="important" style="opacity: -0.9">*</span>
                    上传视频
                </div>
                <div class="upload-box" style="width:100%">
                    <el-upload class="upload-demo" ref="uploadRef" :action="uploadAction" :headers="{ Authorization }"
                        :on-success="fileSuccess" :show-file-list="false" :on-error="fileEerror"
                        accept="image/jpeg,image/image/png,video/*">
                        <button class="btn-white-blue" style="width:130px;background:#1989FA;color:#fff;">
                            <!-- <el-icon><video-camera /></el-icon> -->
                            <i class="el-icon el-icon-camera" />选择视频文件
                        </button>
                    </el-upload>
                    <div class="reveal-file">
                        <div class="file-i" v-for="(item, index) in revealFileList" :key="index"
                            @click="fileRemove(item.uid)">
                            {{ item.name }} <span class="point">×</span>
                        </div>
                    </div>
                    <!-- <div class="upload-introduce">
                        视频时间10s-60s 视频大小不超50M
                    </div> -->
                </div>
            </div>
            <div class="row">
                <div class="name">
                    <span class="important">*</span>
                    被派遣单位
                </div>
                <div style="width:100%">
                    <!-- <el-input placeholder="请输入" style="width:240px" @blur="blurConfirmCode" v-model="dispatchUnit"/> -->
                    <el-select v-model="companyId" filterable placeholder="请选择派遣单位">
                        <el-option v-for="item in companyList" :key="item.id" :label="item.serveCompanyName"
                            :value="item.id" />
                    </el-select>
                </div>
            </div>
            <div class="row">
                <div class="name">
                    <span class="important">*</span>
                    申请理由
                </div>
                <div style="width:100%">
                    <el-input class="remarks-input" v-model="remarksInput" type="text" placeholder="请输入申请理由" />
                </div>
            </div>
            <div class="dialog-btn-box">
                <button class="btn-white" @click="centerDialogVisible = false" style="marginRight:20px">
                    取消
                </button>
                <button class="btn" @click="addDispatchUnit" style="marginLength:20px">
                    提交审核
                </button>
            </div>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import global from '@/utils/global'
import { defineComponent } from 'vue'
import {
    getDispatchExamine,
    getDispatchList,
    cancelDispatchExamine,
    deleteDispatchExamine,
    getCompanyList
} from '@/api/long-insure'
import { BillDetailDto, BillDto } from '@/api/bill'
import batchPayroll from '@/components/batch-payroll.vue'
import {
    insureDispatchList,
    insureDispatchDelete,
    addDispatch
} from '@/api/insure-deduction'
import { ElMessage, ElMessageBox } from 'element-plus'

export default defineComponent({
    name: 'InsureCompany',
    components: {
        batchPayroll
    },
    data() {
        return {
            isPopupTeamMember: false,
            Authorization: 'Bearer' + ' ' + global.token,
            uploadAction:
                process.env.VUE_APP_BASE_URL +
                '/rest/period-insur/serve-company/upload', // 上传路径
            isBatchPay: false,
            pageSize: 10,
            pageNum: 1,
            total: 0,
            tableData: [] as BillDetailDto[],
            searchText: '',
            searchValue: '',
            detailInfo: {} as BillDto,
            selects: [] as string[],
            centerDialogVisible: false, // 弹窗
            fileSize: '',
            fileUrl: '',
            isfileLengt: true,
            dispatchUnit: '', // 派遣单位
            companyList: [] as any, // 所有单位
            companyId: '', // 选择的单位id
            remarksInput: '',
            fileList: [] as {
                fileSize: string;
                fileType: string;
                fileUrl: string;
                uid: string;
            }[],
            revealFileList: [] as any,
            audioDuration: 0 as any
        }
    },
    created() {
        this.getPayrollList()
        this.getCompanyList()
    },
    watch: {
        centerDialogVisible(newval) {
            if (!newval) {
                this.fileList = []
                this.revealFileList = []
                console.log(90000, this.$refs.uploadRef );
                (this.$refs.uploadRef as any).clearFiles()
            }
        }
    },
    methods: {
        // 获取所有单位列表
        async getCompanyList() {
            const result = await getCompanyList()
            console.log(this.companyList, 'result获取所有单位列表')
            this.companyList = result.list
        },
        // 取消 派遣段位 审核
        async cancelDispatchExamine(id: string) {
            const result = await cancelDispatchExamine({ id: id })
            await this.getPayrollList()
            this.$message.success('取消成功！')
        },
        // 删除派遣单位
        deleteDispatchExamine(id: string) {
            ElMessageBox.confirm('确定删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async () => {
                    console.log(id, 'id')
                    await insureDispatchDelete({ id: id })
                    await this.getPayrollList()
                    this.$message.success('删除成功！')
                })
        },
        async getPayrollList() {
            console.log('点击啦', this.pageSize, this.pageNum, this.searchText)
            const result = await insureDispatchList({
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                serveCompanyName: this.searchValue
            })
            this.total = result.totalCount
            this.tableData = result.list
        },
        handleSizeChange() {
            this.pageNum = 1
            this.getPayrollList()
        },
        search() {
            this.searchValue = this.searchText
            this.pageNum = 1
            this.getPayrollList()
        },
        onReset() {
            this.searchText = ''
            this.search()
        },
        handleSelectionChange(selects: { id: string }[]) {
            this.selects = selects.map(item => item.id)
        },
        fileSuccess(
            response: {
                code: number;
                msg: string;
                data: { fileSize: string; fileUrl: string };
            },
            file: any,
            fileList: any
        ) {
            if (file.size / 1024 / 1024 > 30) {
                this.$message.error('视频不可大于30mb')
                console.log(this.revealFileList, 'revealFileList')
                return
            }
            if (this.fileList.length >= 3) {
                this.$message.error('最多支持上传三个')
                return
            }
            if (response.code === 500) {
                this.$message.error(response.msg)
                return
            }
            const arr = []
            if (/video/.test(file.raw.type)) {
                arr.push({
                    fileSize: file.response.data.fileSize,
                    fileType: 'video',
                    fileUrl: file.response.data.fileUrl,
                    uid: file.uid
                })
            }
            if (/image/.test(file.raw.type)) {
                arr.push({
                    fileSize: file.response.data.fileSize,
                    fileType: 'image',
                    fileUrl: file.response.data.fileUrl,
                    uid: file.uid
                })
            }
            this.revealFileList.push({
                url: file.response.data.fileUrl,
                name: file.name,
                uid: file.uid
            })
            this.fileList.push(...arr)
            this.$message.success('上传成功')
        },
        fileEerror() {
            this.$message.error('文件上传失败')
        },
        fileRemove(uid: string) {
            console.log(uid)
            this.fileList = this.fileList.filter(item => item.uid !== uid)
            this.revealFileList = this.revealFileList.filter(
                (item: { uid: string }) => item.uid !== uid
            )
            console.log(this.fileList, uid, 'event')
        },
        onOpenDialogVisible() {
            this.fileList = []
            this.fileSize = ''
            this.centerDialogVisible = true
            ;(this.$refs.uploadRef as any).clearFiles()
        },
        // 被派遣单位
        async addDispatchUnit() {
            console.log(this.companyId, 'companyId')
            if (!this.remarksInput) {
                this.$message.error('请输入申请理由')
                return
            }
            const arr = this.fileList.filter(item => {
                if (/.(mp4|mp3)$/i.test(item.fileUrl)) {
                    return true
                }
            })
            if (arr.length === 0) {
                this.$message.error('请至少上传一个视频')
                return
            }
            const result = await addDispatch({
                serveCompanyId: Number(this.companyId),
                params: {
                    photos: this.fileList
                },
                remark: this.remarksInput,
                applySource: 0
            })
            this.centerDialogVisible = false
            await this.getPayrollList()
            this.$message.success('提交被派遣单位成功')
        }
    }
})
</script>

<style lang="stylus" scoped>
table()
.table
    margin-top 0
.header.block{
    padding 20px
}
.basic
    margin-top 20px
.value
    margin-right 30px

.value.important
    color color-red
    font-style italic
:deep().el-tabs__header.is-top
    display inline-block
    margin-top -20px
:deep().el-tabs__nav-scroll
    padding-right 20px
.height-right
    float: right
.download-btn
    width: 126px !important;
.btn-red
    background: #FF7E68
.el-tabs__header
    margin: 0
.block-alone
    padding: 0 24px 0
.decorate-box
    display flex
    align-items center
.decorate
    width 6px
    height 6px
    border-radius 50%
    margin-right 5px
.row
    margin-top 32px
    .name
        width 150px
        font-size 16px
        font-weight 500
.upload-introduce
    margin-left 16px
    color #1989FA
.dialog-btn-box
    display flex
    align-items center
    justify-content center
    margin-top 40px
.remarks-input
    width 222px
.file-i
    margin-top 5px
.header-info-box
    padding-bottom 16px
    box-sizing border-box
    border-bottom 1px solid #F4F4F7
    .title
        font-size 16px
        font-weight 600
        color #3D3D3D
</style>
